<template>
  <div>
    <new-search-bar searchFixed="true" bgSearch="c-bg-white c-pv24-i" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <div class="c-ph24">
      <div class="c-pv24 c-bd-b1" v-for="(item,index) in eduList" :key="index" @click="goDetail(item.id)">
        <div class="c-flex-row">
          <div class="c-ww210 c-hh140 c-flex-shrink0 c-p c-br16">
            <div class="c-pa c-p-b0 c-p-r0 c-pz10 c-fc-white c-fs20 tag-br c-ph16 c-pv2" :class="item.saleCourseType==1?'c-bg-experience':'c-bg-formal'">
              {{item.saleCourseType==1?'体验课':'正式课'}}
            </div>
            <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.image, require('@/assets/defult270.png'))" />
          </div>
          <div class="c-flex-column c-justify-sb c-pl20 c-flex-grow1 c-w0">
            <div class="c-fs24 c-fc-xblack c-fw-b c-text-ellipsis1 c-lh36">{{item.saleCourseName}}</div>
            <div>
              <div class="c-fs20 c-fc-gray c-text-ellipsis1">剩余名额: {{item.stock - item.saleNum}}</div>
              <div class="c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fc-xmlred c-fw600 c-lh c-flex-row c-aligni-end" :class="Number(item.price) == 0 ? 'c-fs22' : 'c-fs26'">
                  <span v-if="Number(item.price) != 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                  {{item.price | moneyStr}}
                </div>
                <div class="c-fs24 theme-bg-gradient c-br25 c-fc-white c-ww120 c-hh48 c-flex-row c-justify-center c-aligni-center">报名</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.classAddress.length > 0" class="c-mt32">
          <p class="c-fs20 c-fc-gray c-flex-row c-aligni-center"><span class="iconfont c-fs22">&#xe90f;<span class="c-pl10">上课地点</span><span v-if="item.classAddressNum > 1">({{item.classAddressNum}})</span></span></p>
          <p class="c-fs22 c-fc-xblack c-mt10 c-text-ellipsis1" v-if="item.classAddress != '' && item.classAddress != null" :key="_index">地址1: {{item.classAddress[0].schoolName}}</p>
        </div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" :noDataText="'暂无面授课记录'"></loading-status-tem>
    <nav-bottom-bar :itemIndex="23" v-if="showNavBottomBar"></nav-bottom-bar>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: 'EduList',
  components: {
    loadingStatusTem,
    newSearchBar,
    NavBottomBar,
    CoverImg
  },
  props: [],
  beforeCreate() {},
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      saleCourseName: "",
      dataStatus: 'HAS_MORE_DATA',
      eduList: [],
      showNavBottomBar: false,
      companyAuth: null,
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    startSearch(e) {
      this.saleCourseName = e.searchValue;
      pageIndex = 1;
      this.eduList = [];
      utilJs.toPageScrollTop();
      this.getEduList();
    },
    goDetail(id) {
      this.$routerGo(this, "push", {
        path: "/edu/eduDetail",
        query: { id: id }
      })
    },
    getEduList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "educationSystem/saleCourse?page=" + pageIndex + '&limit=' + LIMIT + "&saleCourseName=" + this.saleCourseName, res => {
        if (pageIndex == 1) {
          this.eduList = res.data;
        } else {
          this.eduList = [...this.eduList, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    //分享
    wechatShare: function () {
      let title = "面授课";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduList?&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "面授课";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduList?&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.eduList.length > 0) {
          this.getEduList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.saleCourseName = "";
      this.dataStatus = 'HAS_MORE_DATA';
      this.eduList = [];
      this.getEduList();
    },
  },
  activated() {
    setDocumentTitle("面授课");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.eduList)) {
      this.initData()
    }
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
      let arrCampFilter = this.companyAuth.companyNav.filter((item) => {
        return item.navType == 23;
      });
      this.showNavBottomBar = arrCampFilter.length > 0;
    }
    this.wechatShare();
    window.scrollTo(0, 0);
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tag-br {
    border-radius: .4rem 0 .4rem 0;
  }
</style>
